<template>
  <!-- 课程列表 -->
  <view class="classlist_wrap">
    <!-- 顶部搜索 -->
    <xjx-search name="course"
                @searchCancel="clearInput"></xjx-search>
    <view class="classlist_head">
      <van-dropdown-menu active-color="#2E87FF">
        <van-dropdown-item ref="paixu"
                           :title="paixu.value"
                           id="paixu">
          <van-cell-group>
            <van-cell v-for="(item,index) in paixu.list"
                      :key="index"
                      @click="changetab('paixu',item.type,item.title)">
              <view slot="title"
                    class="font26">
                <view :class="paixu.changetype==item.type?'blue':''">{{item.title}}</view>
              </view>
              <uni-icons v-if="paixu.changetype==item.type"
                         type="checkmarkempty"
                         color="#2E87FF" />
            </van-cell>
          </van-cell-group>
        </van-dropdown-item>
        <van-dropdown-item ref="quyu"
                           :title="quyu.value"
                           id="quyu">
          <van-cell-group>
            <van-cell @click="changetab('quyu','','全部区域')">
              <view slot="title"
                    class="font26">
                <view :class="quyu.changetype==''?'blue':''">选择区域</view>
              </view>
              <uni-icons v-if="quyu.changetype==''"
                         type="checkmarkempty"
                         color="#2E87FF" />
            </van-cell>
            <van-cell v-for="(item,index) in quyu.list"
                      :key="index"
                      @click="changetab('quyu',item.areaCode,item.areaName)">
              <view slot="title"
                    class="font26">
                <view :class="quyu.changetype==item.areaCode?'blue':''">{{item.areaName}}</view>
              </view>
              <uni-icons v-if="quyu.changetype==item.areaCode"
                         type="checkmarkempty"
                         color="#2E87FF" />
            </van-cell>
          </van-cell-group>
        </van-dropdown-item>
        <van-dropdown-item ref="shaixuan"
                           :title="shaxuan"
                           id="shaixuan"
                           @open="openShaixuan"
                           @close="closeShaiXuan">
          <block>
            <view class="shaixuan">
              <text>时间</text>
              <view class="weektime">
                <view class="weekflex"
                      v-for="(item,index) in weeks.list"
                      :key="index">
                  <view class="l"
                        @click="clickriqi(index)">
                    <text class="weektext">{{item.week | weektext}}</text>
                    <view :class="weeks.lineCache.includes(index)?'num act':'num'">{{index==0?'今':item.num}}</view>
                  </view>
                  <view :class="weeks.lineCache.includes(index)&& weeks.lineCache.includes(index+1) ? 'line actline':'line'"></view>
                </view>
              </view>
              <!-- <view class="weeks">
								<view @click="changeweek(index,'week')" :class="weeks.value.includes(String(index+1))?'week act':'week'" v-for="(item,index) in weeks.list" :key="index">{{item.week}}</view>
							</view> -->
              <text class="mar20">课程类型</text>
              <view class="weeks">
                <view @click="changeweek(index,'class')"
                      :class="classdata.valueCache.includes(String(index))?'week act':'week'"
                      v-for="(item,index) in classdata.list"
                      :key="index">{{item.title}}</view>
              </view>
              <view></view>
            </view>
            <view class="shaixuan_bot">
              <view @click="chongzhi(true)"
                    class="left">重置</view>
              <view @click="queding"
                    class="right">确定</view>
            </view>
          </block>
        </van-dropdown-item>
      </van-dropdown-menu>
    </view>
    <scroll-view :scroll-top="scrollTop"
                 :lower-threshold="20"
                 scroll-y="true"
                 @scroll="scroll"
                 @scrolltolower="lower"
                 class="classlist_conwrap scroll-Y"
                 :style="{'height':(scrollheight-78)+'px'}">
      <view class="nodata"
            v-if="listdata.length==0&&pageLoaded"
            :style="{'height':(scrollheight-78)+'px'}">
        <xjx-nodata></xjx-nodata>
      </view>
      <view class="conList" v-for="(item,index) in listdata" :key="index">
        <xjx-class-item  @todetail="gotodetail" :item="item"></xjx-class-item>
      </view>
  
      <view v-if="listdata.length>0&&pageLoaded"
            class="scroll-bottom">
        <van-loading v-if="pageNum>pageNo"
                     type="spinner"
                     size="24px" />
        <text v-else>我也是有底线的~</text>
      </view>
      <!-- 列表无数据loading -->
      <view class="list-loading"
            v-if="listFlag">
        <van-loading size="30px"
                     vertical>加载中...</van-loading>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  data() {
    return {
      paixu: {
        value: '距离优先',
        changetype: '2',
        list: [
          { type: '1', title: '智能排序' },
          { type: '2', title: '距离优先' },
          { type: '3', title: '人气优先' }
          // {type:'3',title:'好评优先'},
        ]
      },
      quyu: {
        value: '选择区域',
        changetype: '',
        list: []
      },
      shaxuan: '筛选',
      weeks: {
        value: [],
        valueCache: [],
        line: [],
        lineCache: [],
        list: [
          { value: 0, week: '1', num: '12' },
          { value: 1, week: '2', num: '13' },
          { value: 2, week: '3', num: '14' },
          { value: 3, week: '4', num: '15' },
          { value: 4, week: '5', num: '16' }
        ],
        year: '',
        month: '',
        start: '',
        startCache: '',
        end: '',
        endCache: ''
      },
      classdata: {
        value: [],
        valueCache: [],
        list: [
          { value: 0, title: '私教课' },
          { value: 1, title: '团体课' },
          { value: 2, title: '集训班' }
        ]
      },
      start: false,
      listdata: [],
      pageSize: 20, //数据数
      pageNo: 1, //当前页码
      pageNum: '', //总页码
      scrollheight: '', //窗口高度
      firstLoad: true,
      scrollTop: 0,
      oldScrollTop: 0,
      pageLoaded: false,
      listFlag: false,
      // 输入完成后重置数据
      isReload: false,
      // 底部滚动加载开关
      loadFlag: false
    };
  },
  computed: {
    ...mapState(['userInfo', 'accessToken', 'position', 'searchValue'])
  },
  components: {
    
  },
  onLoad() {
    this.listFlag = true;
    this.getlistdata();
    this.scrollheight = uni.getSystemInfoSync().windowHeight; //获取可使用的窗口高度
  },
  onShow() {
    this.selectComponent('#paixu').toggle(false);
    this.selectComponent('#quyu').toggle(false);
    this.selectComponent('#shaixuan').toggle(false);
    if (this.isReload) {
      this.resetSearch();
      // 初始化
      return;
    }
    if (this.firstLoad) {
      this.firstLoad = false;
    } else {
      this.reloadList();
    }
    this.getriqi();
    this.quyu.list = this.position.districtList;
  },
  // onReachBottom(){
  // 	if(this.pageNum > this.pageNo){
  // 		this.scrolldata();
  // 	}
  // },
  methods: {
    // 重置数据
    resetSearch() {
      this.clearData();
      // 排序
      this.paixu.value = '距离优先';
      this.paixu.changetype = '2';
      // 区域
      this.quyu.value = '选择区域';
      this.quyu.changetype = '';
      // 筛选
      this.chongzhi(false);
      this.getlistdata();
      this.isReload = false;
    },
    openShaixuan(e) {
    },
    closeShaiXuan(e) {
      let timer = setTimeout(() => {
        this.classdata.valueCache = [...this.classdata.value];
        this.weeks.valueCache = [...this.weeks.value];
        this.weeks.lineCache = [...this.weeks.line];
        this.weeks.startCache = this.weeks.start;
        this.weeks.endCache = this.weeks.end;
        clearTimeout(timer);
      }, 300);
    },
    lower() {
      if (this.loadFlag) return
      if (this.pageNum > this.pageNo) {
        this.loadFlag = true
        this.scrolldata();
      }
    },
    scroll(e) {
      this.oldScrollTop = e.detail.scrollTop;
    },
    getlistdata() {
      //获取列表数据
      if (this.oldScrollTop != 0) {
        this.goTop();
      }
      let data = {
        'ACCESS-TOKEN': this.accessToken,
        state: '3',
        sort: this.paixu.changetype, //排序方式
        x: this.position.lng,
        y: this.position.lat,
        cityCode: '110100',
        areaCode: this.quyu.changetype, //区域
        classStart: this.weeks.start, //课程开始时间
        classEnd: this.weeks.end, //课程结束时间
        type: this.classdata.value.toString(), //课程类型
        searchContent: this.searchValue,
        pageNo: 1,
        pageSize: this.pageSize
      };
      this.$api.queryClassList(data).then(res => {
        if (res.code == '200' && res.data) {
          this.listdata = res.data.list;
          this.pageNum = Math.ceil(Number(res.data.count) / this.pageSize);
          this.pageNo = 1;
          // this.classstyle=this.listdata.length==0?'bgfff':'classlist_conwrap'
          this.$nextTick(() => {
            if (!this.pageLoaded || this.listFlag) {
              // setTimeout(()=>{
              this.pageLoaded = true;
              this.listFlag = false;
              // },500)
            }
          });
        }
      });
    },
    reloadList() {
      // 重载当前列表数据（分页、页码保持不变）
      let ps = this.pageSize * this.pageNo;
      let data = {
        'ACCESS-TOKEN': this.accessToken,
        state: '3',
        sort: this.paixu.changetype, //排序方式
        x: this.position.lng,
        y: this.position.lat,
        cityCode: '110100',
        areaCode: this.quyu.changetype, //区域
        startDate: this.weeks.start, //课程开始时间
        endDate: this.weeks.end, //课程结束时间
        type: this.classdata.value.toString(), //课程类型
        searchContent: this.searchValue,
        pageNo: 1,
        pageSize: ps
      };
      this.$api.queryClassList(data).then(res => {
        if (res.code == '200' && res.data) {
          this.listdata = res.data.list;
        }
        this.loadFlag = false
      });
    },
    queding() {
      this.clearData();
      //确定点击
      this.classdata.value = [...this.classdata.valueCache];
      this.weeks.value = [...this.weeks.valueCache];
      this.weeks.line = [...this.weeks.lineCache];
      this.weeks.start = this.weeks.startCache;
      this.weeks.end = this.weeks.endCache;
      this.$refs.shaixuan.toggle(false);
      this.getlistdata();
    },
    goTop() {
      this.scrollTop = this.oldScrollTop;
      this.$nextTick(() => {
        this.scrollTop = 0;
      });
    },
    gotodetail(id) {
      //去详情
      uni.navigateTo({
        url: '/course/detail/detail?id=' + id
      });
    },
    changetab(text, index, title) {
      //下拉切换
      this.clearData();
      this.$data[text].changetype = index;
      this.$data[text].value = title;
      this.$refs[text].toggle();
      this.getlistdata();
    },
    changeweek(index, text) {
      //筛选周选择
      let arr = [];
      arr = this.classdata.valueCache;
      if (arr.includes(String(index))) {
        this.classdata.valueCache.forEach(function(item, i) {
          if (item == String(index)) {
            arr.splice(i, 1);
          }
        }, this);
      } else {
        arr.push(String(index));
      }
      this.classdata.valueCache = arr;
    },
    clickriqi(index) {
      //筛选日期点击
      let weeks_value = [];
      weeks_value = this.weeks.valueCache;
      if (weeks_value.includes(index)) {
        this.weeks.valueCache.forEach(function(item, i) {
          if (item == String(index)) {
            weeks_value.splice(i, 1);
          }
        }, this);
      } else {
        if (weeks_value.length >= 2) {
          weeks_value = [index];
        } else {
          weeks_value.push(index);
        }
      }
      let line = [];
      if (weeks_value.length >= 2) {
        weeks_value.sort();
        this.weeks.startCache =
          this.weeks.year +
          '-' +
          this.weeks.month +
          '-' +
          this.weeks.list[weeks_value[0]].num +
          ' 00:00:00';
        this.weeks.endCache =
          this.weeks.year +
          '-' +
          this.weeks.month +
          '-' +
          this.weeks.list[weeks_value[1]].num +
          ' 23:59:59';
        for (var s = weeks_value[0]; s <= weeks_value[1]; s++) {
          line.push(s);
        }
      } else if (weeks_value.length == 0) {
        line = [];
        this.weeks.startCache = '';
        this.weeks.endCache = '';
      } else {
        line = weeks_value;
        this.weeks.startCache =
          this.weeks.year +
          '-' +
          this.weeks.month +
          '-' +
          this.weeks.list[weeks_value[0]].num +
          ' 00:00:00';
        this.weeks.endCache =
          this.weeks.year +
          '-' +
          this.weeks.month +
          '-' +
          this.weeks.list[weeks_value[0]].num +
          ' 23:59:59';
      }
      this.weeks.valueCache = weeks_value;
      this.weeks.lineCache = line;
    },
    getriqi() {
      //获取筛选日期
      let _this = this;
      let date_ = new Date();
      let week_ = date_.getDay();
      let weeks_list = [];
      let jt = date_.getDate();
      let month_ = date_.getMonth();
      date_.setMonth(month_ + 1);
      date_.setDate(0);
      let days = date_.getDate();
      this.weeks.year = date_.getFullYear();
      this.weeks.month = date_.getMonth() + 1;
      for (var i = 0; i < 5; i++) {
        if (week_ > 7) {
          week_ = 1;
        }
        if (jt > days) {
          jt = 1;
        }
        weeks_list.push({ week: Number(week_++), num: jt++, value: i });
      }
      this.weeks.list = weeks_list;
    },
    chongzhi(flag) {
      //重置
      this.weeks.valueCache = [];
      this.weeks.lineCache = [];
      this.weeks.startCache = '';
      this.weeks.endCache = '';
      this.classdata.valueCache = [];
			
			this.weeks.value = [];
			this.weeks.line = [];
			this.weeks.start = '';
			this.weeks.end = '';
			this.classdata.value = [];
			
      if (flag) {
        this.queding();
      }
    },
    scrolldata() {
      //滚动到底部时增加数据
      let data = {
        'ACCESS-TOKEN': this.accessToken,
        state: '3',
        sort: this.paixu.changetype, //排序方式
        x: this.position.lng,
        y: this.position.lat,
        cityCode: '110100',
        areaCode: this.quyu.changetype, //区域
        classStart: this.weeks.start, //课程开始时间
        classEnd: this.weeks.end, //课程结束时间
        type: this.classdata.value.toString(), //课程类型
        searchContent: this.searchValue,
        pageNo: this.pageNo + 1,
        pageSize: this.pageSize
      };
      this.$api.queryClassList(data).then(res => {
        if (res.code == '200' && res.data) {
          if (res.data.list.length > 0) {
            this.listdata = [...this.listdata, ...res.data.list];
          } else {
            this.listdata = this.listdata;
          }
          this.$nextTick(() => {
            this.pageNo += 1;
            this.loadFlag = false
          });
        }
      });
    },
    // 列表loading新增
    clearData() {
      this.listdata = [];
      this.listFlag = true;
      this.pageLoaded = false;
      this.loadFlag = false
    },
    // 搜索取消重新获取列表
    clearInput() {
      this.clearData();
      this.getlistdata();
    }
  },
  filters: {
    weektext(num) {
      let text = '';
      switch (num) {
        case 1:
          text = '一';
          break;
        case 2:
          text = '二';
          break;
        case 3:
          text = '三';
          break;
        case 4:
          text = '四';
          break;
        case 5:
          text = '五';
          break;
        case 6:
          text = '六';
          break;
        case 7:
          text = '日';
          break;
        case 0:
          text = '日';
          break;
      }
      return text;
    }
  }
};
</script>

<style lang="scss">
.sssss {
  height: 1000rpx;
}
.van-ellipsis,
.van-cell .van-cell__title {
  font-size: 26rpx !important;
}
.van-dropdown-menu {
  // background-color: #fff !important;
  box-shadow: none !important;
}
.font26 {
  > view {
    font-size: 26rpx;
  }
}
.classlist_wrap {
  padding-top: 158rpx;
  background-color: #fff;
  .classlist_head {
    font-size: 26rpx;
    width: 100%;
    position: fixed;
    left: 0;
    top: 68rpx;
    z-index: 9999;
    border-bottom: 1rpx solid #e9e9e9;
    .shaixuan {
      padding: 30rpx 30rpx 30rpx 40rpx;
      > text {
        display: block;
        color: #999;
        font-size: 26rpx;
        // margin-bottom:20rpx;
      }
      .mar20 {
        margin-bottom: 20rpx;
      }
      .weeks {
        display: flex;
        flex-wrap: wrap;
        .week {
          padding: 0 20rpx;
          height: 67rpx;
          border: 1px solid #ccc;
          line-height: 67rpx;
          font-size: 26rpx;
          color: #666;
          border-radius: 10rpx;
          text-align: center;
          margin-right: 20rpx;
          margin-bottom: 20rpx;
        }
        .week:nth-child(6) {
          margin-right: 0;
        }
        .act {
          background: url($public-baseImgUrl+'icon-checked-corner1.png')
            no-repeat top right;
          border: 1px solid $text-color-blue1;
          color: $public-color-blue1;
          background-size: 34rpx 33rpx;
        }
      }
      .weektime {
        display: flex;
        margin-bottom: 20rpx;
        .weekflex {
          display: flex;
          .l {
            width: 65rpx;
            height: 130rpx;
            font-size: 26rpx;
            .weektext {
              display: block;
              line-height: 65rpx;
              width: 65rpx;
              text-align: center;
              color: #999;
            }
            .num {
              width: 65rpx;
              height: 65rpx;
              line-height: 65rpx;
              text-align: center;
              border-radius: 65rpx;
              background-color: #e9e9e9;
              font-size: 26rpx;
            }
            .act {
              background-color: #2e87ff;
              color: #fff;
            }
          }
          .line {
            width: 86rpx;
            height: 4rpx;
            margin-top: 97.5rpx;
            background-color: #e9e9e9;
          }
          .actline {
            background-color: #2e87ff;
          }
        }
        .weekflex:nth-of-type(5) .line {
          display: none;
        }
      }
    }
    .shaixuan_bot {
      border-top: 1px solid #e9e9e9;
      height: 88rpx;
      display: flex;
      .left {
        width: 375rpx;
        border-right: 1px solid #e9e9e9;
        color: #999;
        font-size: 30rpx;
        text-align: center;
        line-height: 88rpx;
      }
      .right {
        width: 374rpx;
        font-size: 30rpx;
        color: $public-color-blue1;
        text-align: center;
        line-height: 88rpx;
      }
    }
  }

  .blue {
    color: #2e87ff;
    font-size: 26rpx;
  }
  .classlist_conwrap {
    background-color: #fff;
    // padding-top: 30rpx;
    .nodata {
      width: 100%;
      height: 100%;
      background-color: #fff !important;
      overflow: hidden;
    }
    
    .list-loading {
      width: 750rpx;
      display: flex;
      justify-content: center;
      position: relative;
      padding-top: 200rpx;
    }
    .scroll-bottom {
      line-height: 30rpx;
      color: #cccccc;
      text-align: center;
      font-size: 24rpx;
      height: 50rpx;
      text {
        color: #cccccc;
        font-size: 24rpx;
      }
    }
    .pad10{
      padding:20rpx 10rpx;
    }
  }
  .conList{
      padding:0 30rpx;
    }
}
</style>

